<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">
					{{ lang_shop.wirteCoupon }}
				</view>
			</view>
			
			<view>
				<view class="flex-center-center u-p-t-32 u-p-b-32" >
					<view style="position: relative; width: 200rpx; height: 200rpx;" @click="resetAction">
						<x-image :src="code" />
						<view v-if="count < 0 || (userCouponId && !code)" class="reload-icon">
							<u-icon name="reload" color="green" size="64"/>
						</view>
					</view>
				</view>
				<view class="u-p-b-32 u-text-center">{{ dataInfo.sn || '' }}</view>
				
				<view v-if="dataInfo.useStatus" class="u-p-b-32 u-text-center color-red">{{ lang_common.written }}</view>
			</view>
		</view>
		
		<view v-if="dataInfo.id" style="padding: 26rpx 40rpx 0;">
			<coupon-card :item="({ ...dataInfo, couponType: 5 })" disabled></coupon-card>
		</view>
		
		<!-- 留空 -->
		<view style="height: 200rpx;"></view>
		
		<canvas
		id="qrcode"
		canvas-id="qrcode"
		:style="{
			position: 'fixed',
			top: '-9999999px',
			zIndex: '-9999999',
			'width': `${options.size}px`,
			'height': `${options.size}px`
		}" />
	</view>
</template>

<script>
	import uqrcode from '@/utils/uqrcode.js'
	import { userUserCouponInfo } from '@/api/personal.js'
	export default {
		data() {
			let maxCount = 20
			return {
				options: {
					canvasId: 'qrcode',
					size: 354,
					margin: 10,
					text: ''
				},
				code: '',
				isClick: false,
				
				
				userCouponId: '',
				dataInfo: {},
				
				interval: null,
				count: maxCount,
				maxCount
			}
		},
		async onLoad({ userCouponId }) {
			this.userCouponId = userCouponId
			this.initInterval()
		},
		onUnload() {
			clearInterval(this.interval)
		},
		methods: {
			// 刷新二维码
			resetAction() {
				if (this.count <= 0) {
					this.count = this.maxCount
					this.initInterval()
				}
			},
			initInterval() {
				if (this.isClick) return
				this.isClick = true
				clearInterval(this.interval)
				this.initInfo()
				this.interval = setInterval(() => {
					if (this.count <= 0) {
						this.count = 0
						clearInterval(this.interval)
						this.dealCode('#eeeeee')
					} else {
						this.initInfo()
						this.dealCode()
					}
				}, 5000)
			},
			// 生成二维码信息
			make(options = {}) {
				return  uqrcode.make(Object.assign(this.options, options), this)
			},
			dealCode(color = '#000000') {
				let saltKeys = '01234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
				let salts = [1, 1, 1, 1, 1, 1].map(item => {
					return saltKeys[parseInt(Math.random() * saltKeys.length)]
				})
				this.$set(this.options, 'text', `${ salts.slice(0, 3).join('') }${ this.dataInfo.sn }${ salts.slice(3).join('') }`)
				this.$set(this.options, 'foregroundColor', this.dataInfo.useStatus ? '#eeeeee' : color)
				this.$nextTick(async () => {
					let result = await this.make()
					this.code = result.tempFilePath
					
					this.count--
				})
			},
			// 初始化详情
			initInfo() {
				userUserCouponInfo({ userCouponId: this.userCouponId }).then((result) => {
					this.isClick = false
					this.dataInfo = {...result}
					if (result.useStatus) {
						this.code && this.$api.msg('优惠券已核销')
						clearInterval(this.interval)
					}
					if (!this.code && this.dataInfo.sn) {
						this.dealCode()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.reload-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #eeeeee;
		border-radius: 100rpx;
	}
</style>
